<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/12/7 0007
  Time: 19:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <title>Title</title>
    <!--翻页的点击事件-->
    <script type="text/javascript">

        function runpage(curr){
            var id=$("[name='id']").val();
            var name=$("[name='name']").val();
            var idBook=$("#idBook").val();
            //alert(name+id+"名字和选择的id");
            alert(idBook+"书的id");
            window.location="/books/list?curr="+curr+"&name="+name+"&id="+id;
        }

        function deleteBook(id){
            var tableid=$("[name='tableId']").val();
                alert("要删除的书的id"+id+" 表格的id"+tableid);
                $.post("/books/deleteBooks",{"id":id},function (date) {
                    if (date.resoult==true){
                        alert(date.message);
                        $('table tr').eq(tableid).remove();
                    }else{
                        alert(date.message);
                    }
                },"json")
        }

        $(function(){

            $("tr:odd").css("background-color","yellow");
        });
    </script>
</head>
<body>
<div class="left" align="center">
    <form action="/books/list" method="post">
        <select name="id">
        <option value="1" <c:if test="${id==1 }">selected</c:if>>书名</option>
        <option value="2" <c:if test="${id==2 }">selected</c:if>>作者</option>
        <option value="3" <c:if test="${id==3 }">selected</c:if>>出版社</option>
    </select>
        <input type="text" name="name" value="${name}">
        <%--<input type="hidden" name="curr" value="${curr}">--%>
        <input type="submit" value="提交">
    </form>
    <a href="${pageContext.request.contextPath}/toaddBook" >添加</a>
    <table border="1" width="480px" align="center">
        <tr>
            <td>书名</td>
            <td>作者</td>
            <td>出版社</td>
            <td>页数</td>
            <td>价格</td>
            <td align="center">操作</td>
        </tr>
        <c:forEach items="${pages.list}" var="book" varStatus="i">
            <tr>
                <!--隐藏的id测试数据和-->
                <input type="hidden" value="${book.bookId}" id="idBook">
                <!--表格的id排序-->
                <input type="hidden" value="${i.index+1}" name="tableId">
                <td>${book.bookName }</td>
                <td>${book.bookAuthor}</td>
                <td>${book.bookPublish}</td>
                <td>${book.bookPage}</td>
                <td>${book.bookPrice }</td>
                <th><a href="${pageContext.request.contextPath}/toUpdateBook?bookID=${book.bookId}">修改</a></th>
                <td><input type="button" value="删除" onclick="deleteBook(${book.bookId})"></td>
            </tr>
        </c:forEach>
    </table>


    <!--直接咱-->
    <div id="but">
        <c:if  test="${pages.currPage!=1}">
            <button onclick="runpage(1)">首页</button>
        </c:if>

        <c:if test="${pages.currPage>1}">
            <button onclick="runpage(${pages.currPage-1})">上一页</button>
        </c:if>

        <c:forEach  begin="1" end="${pages.countPage}" var="i"  >
            <button onclick="runpage(${i})">${i}</button>
        </c:forEach>

        <c:if test="${pages.currPage<pages.countPage}">
            <button onclick="runpage(${pages.currPage+1})">下一页</button>
        </c:if>

        <c:if test="${pages.currPage!=pages.countPage}">
            <button onclick="runpage(${pages.countPage})">末页</button>
        </c:if>
    </div>

</div>
</body>
</html>
